// 上传图片

<template>
  <div class="img-upload-box" style="margin-left: 6px">
    <el-form ref="role" class="upload-img-wrap">
      <el-form-item label prop="license" style="margin-top: 10px;">
        <el-upload
          list-type="picture-card"
          :action="upLoadUrl"
          :file-list="fileShowList"
          :on-remove="handleRemove"
          :before-upload="handleUpload"
          multiple
          :limit="countLimit"
          style="height: 142px"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <div class="tips-red" style="padding-bottom: 10px;"> 
          图片大小推荐1 - 2M，往下滚动查看更多。
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

export default {
  components: {},
  props: {
    labelName: {
      type: String,
    },
    countLimit: {
      type: Number,
    },
    imgArrProp: {
      type: String,
    },
    isNecessary: {
      type: String,
    },
  },
  data() {
    return {
      upLoadUrl: "",
      imgArr: [],
      fileShowList: [],
      isNecessaryInput: false,
    };
  },
  mounted() {
    if (this.imgArrProp) {
      var imgArrDefault = this.imgArrProp.split(",");
      this.imgArr = this.fileShowList = this.handleImgSwitch(imgArrDefault);
      console.log(this.imgArr);
    }
    this.isNecessaryInput = this.isNecessary ? true : false; //是否必须字段

     //隐藏样式冲突
     $("input[name='file']").hide();

  },
  methods: {
    //处理图片
    handleImgSwitch(imgArrDefault) {
      var tempImgArr = [];
      for (var i = 0; i < imgArrDefault.length; i++) {
        if (i >= this.countLimit) break;
        var img1 = {
          uid: imgArrDefault[i].split("?")[1],
          name: imgArrDefault[i].split("?")[0],
          url: imgArrDefault[i],
        };
        tempImgArr.push(img1);
      }

      //检测图片大小限制，多余就截取
      return tempImgArr;
    },

    //移除图片
    handleRemove(file, fileList) {
      console.log("删除", file, fileList);
      let deleteUrl = file.url;
      let len = this.imgArr.length;
      for (var i = 0; i < this.imgArr.length; i++) {
        if (this.imgArr[i].uid == file.uid) {
          this.imgArr.splice(i, 1);
        }
      }
    },

    //上传图片
    handleUpload(file) {
      console.log("file", file);

      // //进行图片类型和大小的限制
      // var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
      // const extension = testmsg === 'png'
      // const extension2 = testmsg === 'jpg'
      // const extension3 = testmsg === 'jpeg'
      // const extension4 = testmsg === 'gif'
      // const isLt2M = file.size / 3 / 1024 / 1024 < 1;
      // //const isLt2M = file.size / 1024  <= 500
      // if(!extension && !extension2 && !extension3 && !extension4) {
      //   this.$message({
      //     message: '展会广告图只能是 png、jpg、jpeg、gif格式!',
      //     type: 'warning'
      //   });
      //   return false;//必须加上return false; 才能阻止
      // }
      // if(!isLt2M) {
      //   this.$message({
      //     message:'展示图片大小不能超过1M!请重新选择!',
      //     type: 'warning'
      //   });
      //    return false;//必须加上return false; 才能阻止
      // }

      //图片上传
      var url = API.common.upload;
      let formdata = new FormData();
      formdata.append("file", file);
      var imgs = {
        uid: file.uid,
        name: "",
        url: "",
      };
      jhTools.post(url, formdata, null, (res) => {
        if (res.code == 200) {
          console.log("上传成功", res.data.fullUrl);
          console.log("图片res", res);
          imgs.name = res.data.fullUrl;
          imgs.url = res.data.fullUrl;
          this.imgArr.push(imgs);
          this.fileShowList = this.imgArr;
          var limitCount = this.countLimit ? +this.countLimit : 1;
          if (this.imgArr.length <= limitCount) {
            //提示限制
            this.$message({
              type: "success",
              message: `上传成功，最多上传${limitCount}张`,
            });
          }
          this.uploadSuccess(this.imgArr);
        }
      });
      console.log("imgArr", this.imgArr);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    uploadSuccess(imgArr) {
      //触发上传函数 把字符串改变
      var imgUrlArr = [];
      imgArr.forEach((item, index) => {
        imgUrlArr.push(item.url);
      });
      var imgArrStr = imgUrlArr.join(",");
      this.$emit("uploadSuccess", imgArrStr);
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

.upload-img-box {
  overflow: hidden;
  img {
    height: 100%;
  }
}

.tips-red {
  color: red;
}
</style>
